<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view>
		<view class="bigBG" :style="{ position: 'fixed', width: windowWidth + 'px', height: windowHeight + 'px' }"></view>
		<view class="contentBox">
			<view class="titleText" @tap="gdzz(list.gdclmx)">
				<text>{{ list.gdclmx[0].czlxmc }}</text>
				<uni-icons color="#333333" type="forward" size="20" />
			</view>
			<view class="contentTop">
				<view class="contentTopTitle">
					<text style="font-size: $uni-font-size-custom-f;">{{ list.zcmc }}</text>
					<text style="font-size: $uni-font-size-custom-e; color: #606162">{{ list.zuobiao }}</text>
				</view>
				<view style="font-size: $uni-font-size-custom-d; margin-top: 5px; margin-bottom: 5px;">{{ list.sbip }}</view>
				<view style="font-size: $uni-font-size-custom-d; color: #606162;">{{ list.xxdz }}</view>
			</view>
			<uni-card title="故障详情" :is-full="true" class="cardBox">
				<view class="bottombdBox">
					<text>故障类型</text>
					<text style="color: #666666;">
						<text>{{ list.lxmcs ? list.lxmcs + ' / ' : '' }}</text>
						<text>{{ list.gzlbmc }}</text>
					</text>
				</view>
				<view class="bottombdBox">
					<text>故障描述</text>
					<text style="color: #666666;">{{ list.gzms }}</text>
				</view>
				<view class="bottombdBox">
					<text>报障时间</text>
					<text style="color: #666666;">{{ list.bzsj | dateFormat }}</text>
				</view>
			</uni-card>
			<uni-card title="工单详情" :is-full="true" class="cardBox">
				<view class="bottombdBox">
					<text>工单编号</text>
					<text style="color: #666666;">{{ list.gdbh }}</text>
				</view>
				<view class="bottombdBox">
					<text>工单等级</text>
					<text style="color: #666666;">{{ list.gddjmc }}</text>
				</view>
				<view class="bottombdBox">
					<text>工单状态</text>
					<text style="color: #666666;">{{ caculType(list.gdzt) }}</text>
				</view>
				<view class="bottombdBox">
					<text>指派人</text>
					<text style="color: #666666;">{{ list.slrzsxm }}</text>
				</view>
				<view class="bottombdBox">
					<text>接单人</text>
					<text style="color: #666666;">{{ list.dqclrzsxm }}</text>
				</view>
				<view class="bottombdBox">
					<text>接单时间</text>
					<text style="color: #666666;">{{ list.slsj | dateFormat }}</text>
				</view>
			</uni-card>
		</view>
		<view class="dropdown-mask" v-if="detailsIsShow"></view>
		<view class="videoBigBox" v-if="showVideo">
			<view class="videoStop"><uni-icons @tap="videoClose" color="#333333" type="closeempty" size="20" /></view>
			<video
				class="videoBox"
				id="detailsVideo"
				:autoplay="true"
				:src="vsrcVideo"
				type="video/mp4"
				@error="videoError"
				:enable-play-gesture="true"
				objectFit="contain"
			></video>
		</view>
		<view class="bohuiBoxBottom" v-if="detailsIsShow">
			<view class="gdzzClose">
				<view></view>
				<uni-icons @tap="gdzzClose" color="#333333" type="closeempty" size="20" />
			</view>
			<!-- list.gdclmx -->
			<!-- @touchmove.stop.prevent='stopMove' -->
			<view class="gdlistBox">
				<!-- style="touch-action: none; pointer-events: none;" -->
				<view v-for="(item, index) in list.gdclmx" :key="item.id">
					<view class="gdlistBoxTitle">
						<view class="gdlistBoxTitle2" :style="index === 0 ? 'background-color: #038bff;' : 'background-color: #e4e7ed;'"></view>
						<text>{{ item.clsj | dateFormat }}</text>
					</view>
					<view :class="index === list.gdclmx.length - 1 ? 'gdlistBoxCent2' : 'gdlistBoxCent'">
						<view style="font-size: $uni-font-size-custom-d; color: #646566">{{ item.czlxmc }}</view>
						<view style="font-size: $uni-font-size-custom-d; color: #646566">{{ item.cznr }}</view>
						<view style="font-size: $uni-font-size-custom-d; color: #646566">{{ item.czr_ZSXM }}</view>
						<view style="font-size: $uni-font-size-custom-d; color: #038bff" v-if="isShowTp(item.tp)" @tap="kantupian(item.tp)">查看图片</view>
						<view style="font-size: $uni-font-size-custom-d; color: #038bff" v-if="item.vsrcVideo" @tap="kanshipin(item.vsrcVideo)">查看视频</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import distance from '@/utils/distance.js'; // 计算距离
import { coordinate } from '@/utils/distance.js'; // 获取定位
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data() {
		return {
			windowWidth: 0, // 手机宽
			windowHeight: 0, // 手机高
			detailsIsShow: false, // 工单追踪
			showVideo: false,
			vsrcVideo: '', // 视频
			list: {
				id: '',
				zcmc: '', // 资产名称
				gdbh: '', // 工单编号
				gdzt: '', // 工单状态
				gddjmc: '', // 工单登记名称
				dqclrzsxm: '', // 当前处理人真实姓名
				slrzsxm: '', // 受理人真实姓名
				gzlbmc: '', // 故障类别名称
				gzms: '', // 故障描述
				slsj: '', // 受理时间
				bzsj: '', // 保障时间
				lxmcs: '', // 故障类别名称上级
				zuobiao: '', // 距离
				sbip: '', // ip
				xxdz: '', // 详细地址
				jd: '', // 经度
				wd: '', // 纬度
				gdclmx: [
					{
						czbt: '',
						vsrcVideo: ''
					}
				] // 操作明细数组
			}
		};
	},
	onLoad(option) {
		const { bh } = option;
		if (bh) {
			this.getList(bh);
		}
	},
	computed: {
		caculType() {
			// 计算属性传参需要使用闭包
			return function(index) {
				const arr = ['已受理', '待确认', '正常关闭', '驳回', '挂起', '外派', '异常关闭'];
				return arr[index - 1];
			};
		},
		isShowTp() {
			return function(val) {
				if (val && typeof val === 'object') {
					// const obj = JSON.parse(val);
					if (val.length > 0) {
						return true;
					} else {
						return false;
					}
				} else {
					return false;
				}
			};
		}
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.windowWidth = res.windowWidth;
				that.windowHeight = res.windowHeight;
			}
		});
	},
	methods: {
		async getList(val) {
			if (val) {
				const jwd = await coordinate();
				const params = {
					GDBH: val,
					JD: jwd.longitude,
					WD: jwd.latitude
				};
				const { data: res } = await this.$http(true, 'ywzx/gdjs/gdxq', params, 'post');
				if (res.code !== '0000') {
					uni.showToast({
						title: res.message,
						icon: 'none',
						position: 'top'
					});
				} else {
					var distances = '';
					// var tup = []; // 图片
					// if (res.data.jd - 0 !== 0 && res.data.wd - 0 !== 0) {
					// 	distances = await this.distanceNum(res.data.jd || 0, res.data.wd || 0);
					// } else {
					// 	distances = '';
					// }
					if (res.data.juli) {
						if (res.data.juli > 1000) {
							distances = (res.data.juli / 1000).toFixed(1) + 'km';
						} else {
							distances = res.data.juli + 'm';
						}
					} else {
						distances = '';
					}
					const cityList = res.data.sfmc + res.data.csmc + res.data.qxmc + res.data.xzjdmc;
					const obj = {
						id: res.data.id,
						zcmc: res.data.zcmc, // 资产名称
						gdbh: res.data.gdbh, // 工单编号
						gdzt: res.data.gdzt, // 工单状态
						gddjmc: res.data.gddjmc, // 工单登记名称
						dqclrzsxm: res.data.dqclrzsxm, // 当前处理人真实姓名
						slrzsxm: res.data.slrzsxm, // 受理人真实姓名
						gzlbmc: res.data.gzlbmc, // 故障类别名称
						gzms: res.data.gzms, // 故障描述
						slsj: res.data.slsj, // 受理时间
						bzsj: res.data.bzsj, // 保障时间
						lxmcs: res.data.lxmcs, // 故障类别名称上级
						zuobiao: distances, // 距离
						sbip: res.data.sbip, // ip
						xxdz: cityList + res.data.xxdz, // 详细地址
						jd: res.data.jd,
						wd: res.data.wd,
						gdclmx: res.data.gdclmx // 操作明细数组
					};
					obj.gdclmx.forEach(item => {
						var tup = []; // 图片
						if (item.tp) {
							const fenli = JSON.parse(item.tp);
							if (fenli.length >= 0) {
								// var index = fenli.findIndex(item2 => {
								// 	const fileText = item2.url.substring(item2.url.lastIndexOf('.'), item2.length);
								// 	const fileName = fileText.toLowerCase();
								// 	if (fileName === '.mp4') {
								// 		return (item.vsrcVideo = item2.url);
								// 	}
								// });
								// console.log(index);
								// if (index !== -1) {
								// 	fenli.splice(index, 1);
								// 	console.log(fenli)
								// 	item.tp = fenli;
								// }
								fenli.forEach(item2 => {
									const fileText = item2.url.substring(item2.url.lastIndexOf('.'), item2.length);
									const fileName = fileText.toLowerCase();
									if (fileName === '.mp4') {
										item.vsrcVideo = item2.url;
									} else {
										tup.push(item2.url);
										item.tp = tup;
									}
									// tup.push(item2.url);
									// item.tp = tup;
								});
							}
						}
					});
					this.list = obj;
				}
			}
		},
		// distanceNum(jd, wd) {
		// 	const that = this;
		// 	return new Promise((resolve, reject) => {
		// 		uni.getLocation({
		// 			// altitude: true,
		// 			type: 'wgs84', //返回可以用于uni.openLocation的经纬度
		// 			geocode: true,
		// 			success: function(res) {
		// 				const latitude = res.latitude;
		// 				const longitude = res.longitude;
		// 				distance(longitude, latitude, jd, wd, val => {
		// 					if (val) {
		// 						resolve(val);
		// 					} else {
		// 						return reject('0m');
		// 					}
		// 				});
		// 			}
		// 		});
		// 	});
		// },
		kantupian(e) {
			if (e) {
				// const img = JSON.parse(e);
				// const img = e;
				// const arr = [];
				// img.forEach(item => {
				// 	arr.push(item.url);
				// });
				const arr = e;
				uni.previewImage({
					current: arr[0] || '',
					urls: arr,
					success: res => {
						console.log(res);
					},
					fail: err => {
						console.log(err);
					}
				});
			}
		},
		kanshipin(e) {
			if (e) {
				this.vsrcVideo = e;
			}
			this.showVideo = true;
		},
		// 打开工单追踪
		gdzz(val) {
			// console.log(val);
			this.detailsIsShow = true;
		},
		// 关闭工单追踪
		gdzzClose() {
			this.detailsIsShow = false;
		},
		// 视频播放失败
		videoError(e) {
			uni.showModal({
				content: '网络错误，请稍后重试！',
				showCancel: false,
				success: function(res) {
					this.showVideo = false;
				}
			});
		},
		videoClose() {
			this.showVideo = false;
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-card__header-title-text {
	color: #000000;
}
.bigBG {
	background-color: #f4f4f4;
	z-index: -10;
}
.contentBox {
	position: relative;
	padding: 0 15px 18px 15px;
	.titleText {
		display: flex;
		align-items: center;
		font-size: $uni-font-size-custom-i;
		margin-bottom: 15px;
	}

	.contentTop {
		background-color: #ffffff;
		border-radius: 10px;
		padding: 10px;
		.contentTopTitle {
			display: flex;
			justify-content: space-between;
		}
	}
	.cardBox {
		margin-top: 6px;
		font-size: $uni-font-size-custom-e;
		border-radius: 12px;
	}
	.bottombdBox {
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
.bohuiBoxBottom {
	position: fixed;
	bottom: 0px;
	left: 0;
	width: 750rpx;
	height: 350px;
	padding: 15px;
	box-sizing: border-box;
	background-color: #ffffff;
	border-top-right-radius: 5%;
	border-top-left-radius: 5%;
	touch-action: none;
	overflow: hidden;
	z-index: 1000;
	.gdzzClose {
		display: flex;
		touch-action: none;
		justify-content: space-between;
	}
	.gdlistBox {
		height: 310px;
		// touch-action: none;
		overflow: auto;
		.gdlistBoxTitle {
			position: relative;
			margin-left: 15px;
		}
		.gdlistBoxTitle2 {
			position: absolute;
			top: 8px;
			left: -15px;
			display: inline-block;
			width: 8px;
			height: 8px;
			// background-color: #038bff;
			background-color: #e4e7ed;
			border-radius: 50%;
		}
		.gdlistBoxCent {
			border-left: 1px solid #cccccc;
			margin-left: 3px;
			padding: 2px 3px 2px 15px;
		}
		.gdlistBoxCent2 {
			margin-left: 3px;
			padding: 2px 3px 2px 15px;
		}
	}
}
.dropdown-mask {
	top: 0;
	left: 0;
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	touch-action: none;
	background-color: rgba(0, 0, 0, 0.8);
}
.videoBigBox {
	position: fixed;
	z-index: 1005;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: #ffffff;
	.videoStop {
		position: absolute;
		top: 5%;
		right: 5%;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.videoBox {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 750rpx;
		height: 350px;
		transform: translate(-50%, -50%);
	}
}
</style>
